<template>
   <div class="active">
        <h1>最新活动</h1>
        <div class="active-body">
            <a 
            class="active-item" 
            v-for="item of this.list"
            :key="item.id"
            :href="item.url"
            target="_blank">
               <img class="swiper-img" :src="item.img.url" alt="">
            </a>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'

export default {
  name: 'news-list-right-active',
  components:{
   
  },
  props:{
     
     
  },
  data () {
    return {
        id:6,
        list:[],
        username:'',
        phone:'',
       
    }
  },
  watch:{
    data(){
       
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
      this.getInfo()
    
  },
  methods:{
    getInfo(){
      // console.log(this.baseUrl)
      axios.get(this.baseUrl+'banner/'+this.id,
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
      // console.log(response)
      this.list = response.data.items
    }
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.active 
    width 282px
    margin-top 20px
.active>h1 
    height 40px
    line-height 40px
    color white 
    text-align left
    text-indent 20px
    font-size 22px
    background #1fafc0
.active-body
    border 1px solid #d5d6d6
    .active-item 
        display block
        width 262px
        margin 10px
        // height 152px
        // background red
</style>
